import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Pressable,
} from "react-native";
import Ionicons from "@expo/vector-icons/Ionicons";
import { AntDesign } from "@expo/vector-icons";

interface ListItemProps {
  title: string;
  iconName: keyof typeof Ionicons.glyphMap;
  onPress: () => void;
  leading?: React.ReactNode; // 左侧组件
  trailing?: React.ReactNode; // 尾部组件
  contentPadding?: number; // 内边距
}

/**
 * 可复用的列表项组件
 * @param {string} title - 列表项的标题
 * @param {string} iconName - 列表项的图标名称（这里使用文字代替）
 * @param {Function} onPress - 列表项点击事件
 */
const ListTile = ({
  title,
  iconName,
  onPress,
  leading,
  trailing,
}: ListItemProps) => {
  return (
    <Pressable style={styles.container} onPress={onPress}>
      {leading && <View style={styles.leading}>{leading}</View>}
      <Text style={styles.title}>{title}</Text>
      {trailing && <View style={styles.trailing}>{trailing}</View>}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    height: 50,
    backgroundColor: "white",
  },
  leading: {
    paddingHorizontal: 8,
  },
  trailing: {
    paddingHorizontal: 8,
  },
  title: {
    flex: 1, // 确保标题占据剩余空间
    fontSize: 16,
    color: "#333",
  },
  chevron: {
    fontSize: 20,
    color: "#ccc",
  },
});

export default ListTile;
